<template>
  <div class="card-title">
    <div class="line"></div>
    <div class="text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: "card-title",
  props: {
    text: String,
  },
  data () {
    return {};
  },
  created () {
  },
  mounted () {
  },
  methods: {},

};
</script>

<style lang="scss" scoped>
@import "../scss/common.scss";

.card-title {
  width: 100%;
  color: #00b4fc;
  font-size: px-to-rem(18px);
  font-weight: bold;
  height: px-to-rem(40px);
  line-height: px-to-rem(40px);
  position: relative;

  .line {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: px-to-rem(18px);
    background-color: #fff;
  }
  .text{
    padding-left: px-to-rem(14px);
    font-size: px-to-rem(16px);
    font-family: MicrosoftYaHei-Bold;
  }
}
</style>
